<template>
    <h1>聚类模型</h1>
    <div style="text-align: center" v-loading="!loadOver">
        <div v-show="loadOver">
            <img id="cluster-plot" :src="img_base64" alt="Cluster Plot">
        </div>
    </div>
</template>

<script>
import axios from "axios";

export default {
    data() {
        return {
            img_base64: "",
            loadOver: false
        };
    },
    methods: {
        clusterQuery() {
            axios.get("http://10.22.243.79:9243/job/kmeans").then(resp => {
                const img_base64 = resp.data.data.img_base64;
                this.img_base64 = `data:image/png;base64,${img_base64}`;
                this.loadOver = true;
            })

        }
    },
    mounted() {
        this.clusterQuery();
    }
};
</script>

<style>

</style>
  